<template>
  <div class="school-history-container">
    <!-- 波浪导航栏（与Dashboard4保持一致） -->
    <div class="wave-header">
      <div class="wave-container">
        <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none">
          <defs>
            <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="wave-parallax">
            <use xlink:href="#wave" x="50" y="0" fill="rgba(25, 118, 210, 0.7)" />
            <use xlink:href="#wave" x="50" y="3" fill="rgba(25, 118, 210, 0.5)" />
            <use xlink:href="#wave" x="50" y="6" fill="rgba(25, 118, 210, 0.3)" />
          </g>
        </svg>
      </div>
      <div class="nav-content">
        <div class="logo-container">
          <div class="logo">
            <div class="logo-icon">
              <el-icon :size="40"><School /></el-icon>
            </div>
            <div class="logo-text">
              <h1>研究生招生系统</h1>
              <p>Graduate Enrollment System</p>
            </div>
          </div>
        </div>
        <div class="user-info">
          <div class="user-details">
            <span>欢迎回来，{{ studentName }}</span>
            <p>上次登录：{{ lastLogin }}</p>
          </div>
          <el-avatar :size="48" :src="avatar" />
        </div>
      </div>
    </div>

    <!-- 校史内容区域 -->
    <main class="history-main">
      <div class="history-header">
        <h1>四川大学锦江学院校史</h1>
        <p>传承百年文脉，谱写教育新篇</p>
      </div>

      <div class="timeline-container">
        <div class="timeline">
          <div v-for="(event, index) in historyEvents" :key="index" class="timeline-event">
            <div class="timeline-date">{{ event.date }}</div>
            <div class="timeline-content">
              <h3>{{ event.title }}</h3>
              <p>{{ event.description }}</p>
              <div v-if="event.image" class="timeline-image">
                <img :src="event.image" :alt="event.title" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部区域（与Dashboard4保持一致） -->
    <footer>
      <div class="footer-content">
        <div class="footer-section">
          <h3>联系方式</h3>
          <p><el-icon><Location /></el-icon> 四川省成都市锦江区四川大学锦江学院</p>
          <p><el-icon><Phone /></el-icon> 028-12345678</p>
          <p><el-icon><Message /></el-icon> jwc@scujj.edu.cn</p>
        </div>

        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="qrcode-container">
            <div class="qrcode">
              <div class="qrcode-placeholder"></div>
              <p>招生公众号</p>
            </div>
            <div class="qrcode">
              <div class="qrcode-placeholder"></div>
              <p>教务公众号</p>
            </div>
          </div>
        </div>

        <div class="footer-section">
          <h3>快速链接</h3>
          <p><a href="#">研究生院主页</a></p>
          <p><a href="#">招生简章</a></p>
          <p><a href="#">导师信息</a></p>
          <p><a href="#">常见问题</a></p>
        </div>
      </div>

      <div class="copyright">
        <p>© 2023 四川大学锦江学院研究生院 版权所有 | 蜀ICP备12345678号</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { School, Location, Phone, Message } from '@element-plus/icons-vue';

// 学生信息（与Dashboard4保持一致）
const studentName = ref('张同学');
const lastLogin = ref('2023-09-20 14:30');
const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');

// 校史事件数据
const historyEvents = ref([
  {
    date: '2006年',
    title: '学校创立',
    description: '四川大学锦江学院经教育部批准成立，由四川大学举办、四川旭峰实业有限公司合作举办的独立学院。',
    image: ''
  },
  {
    date: '2008年',
    title: '首批本科专业招生',
    description: '学校迎来首批本科专业学生，开设了经济、管理、文学、工学等学科门类。',
    image: ''
  },
  {
    date: '2012年',
    title: '通过教育部合格评估',
    description: '学校顺利通过教育部本科教学工作合格评估，办学质量得到认可。'
  },
  {
    date: '2015年',
    title: '研究生教育启动',
    description: '学校获批开展硕士研究生教育，首批设立计算机科学与技术、工商管理两个硕士点。'
  },
  {
    date: '2018年',
    title: '新校区建设',
    description: '学校启动新校区建设项目，规划建设现代化教学楼、实验中心和研究生公寓。',
    image: ''
  },
  {
    date: '2020年',
    title: '省级一流专业建设',
    description: '计算机科学与技术、电子信息工程专业获批省级一流本科专业建设点。'
  },
  {
    date: '2022年',
    title: '研究生院成立',
    description: '学校正式成立研究生院，标志着研究生教育进入新的发展阶段。'
  },
  {
    date: '2023年',
    title: '国际合作拓展',
    description: '与多所国际知名大学建立合作关系，开展联合培养和学术交流项目。'
  }
]);
</script>

<style scoped>
.school-history-container {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  color: #333;
}

/* 波浪导航栏样式（与Dashboard4保持一致） */
.wave-header {
  position: relative;
  background: linear-gradient(135deg, #1a2b4b, #2c5282);
  color: white;
  height: 220px;
  overflow: hidden;
}

/* 校史内容区域样式 */
.history-main {
  flex: 1;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.history-header {
  text-align: center;
  margin-bottom: 40px;
}

.history-header h1 {
  font-size: 36px;
  color: #1a2b4b;
  margin-bottom: 15px;
}

.history-header p {
  font-size: 18px;
  color: #2c5282;
}

/* 时间线样式 */
.timeline-container {
  position: relative;
  padding: 20px 0;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #2c5282;
  left: 50%;
  margin-left: -2px;
  border-radius: 2px;
}

.timeline-event {
  position: relative;
  margin-bottom: 50px;
}

.timeline-date {
  position: absolute;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #2c5282;
  color: white;
  border-radius: 20px;
  font-weight: bold;
  left: 50%;
  margin-left: -60px;
  top: -20px;
  z-index: 2;
}

.timeline-content {
  position: relative;
  width: 42%;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
  color: #1a2b4b;
  margin-top: 0;
}

.timeline-content p {
  line-height: 1.6;
}

.timeline-image {
  margin-top: 15px;
}

.timeline-image img {
  width: 100%;
  border-radius: 8px;
}

/* 左右交替布局 */
.timeline-event:nth-child(odd) .timeline-content {
  left: 0;
}

.timeline-event:nth-child(even) .timeline-content {
  left: 58%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .timeline::before {
    left: 30px;
  }

  .timeline-event {
    margin-left: 60px;
  }

  .timeline-date {
    left: 0;
    margin-left: 0;
  }

  .timeline-content {
    width: auto;
    left: 0 !important;
    margin-right: 30px;
  }
}

/* 底部样式 */
footer {
  background: linear-gradient(135deg, #1a2b4b, #2c5282);
  color: white;
  padding: 40px 20px 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto 30px;
  gap: 40px;
}

.footer-section {
  flex: 1;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: #4a9ff9;
}

.footer-section p {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.9;
}

.footer-section a {
  color: #a0c6ff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: white;
  text-decoration: underline;
}

.qrcode-container {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.qrcode {
  text-align: center;
}

.qrcode-placeholder {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  opacity: 0.8;
}

</style>